<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入项目名称"
              v-model="searchForm.searchInput"
            />
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="searchForm.searchSelectValue"
              placeholder="请选择项目类型"
              @change="selectChange"
            >
              <el-option
                v-for="item in projectTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="primary" @click="goBack">返回</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="newProject"
          v-if="customerCode"
          >添加项目</el-button
        >
        <el-button type="success" icon="el-icon-refresh" @click="refresh"
          >刷新</el-button
        >
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="projectName" label="项目名称" align="center" />
          <el-table-column prop="projectType" label="项目类型" align="center" />
          <el-table-column prop="projectDes" label="项目描述" align="center" />
          <!-- <el-table-column
            prop="customerPhone"
            label="手机号码"
            align="center"
          /> -->

          <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="400" align="center">
            <template #default="{ row }">
              <!-- <el-button type="primary" size="mini" @click="handlerDetails(row)"
                >详情</el-button
              > -->
              <el-button type="primary" size="mini" @click="deviceClick(row)"
                >设备</el-button
              >
              <el-button type="warning" size="mini" @click="handlerEdit(row)"
                >编辑
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="handlerScenario(row)"
              >
                应用场景
              </el-button>

              <el-button type="danger" size="mini" @click="handlerDelete(row)">
                删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newProjectModel"
            ref="loginFormRef"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="newProjectModel.projectName"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="项目类型" prop="projectType">
              <el-select
                v-model="newProjectModel.projectType"
                placeholder="选择客户类型"
                :disabled="detailsDisabled"
              >
                <el-option
                  v-for="item in projectTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="项目描述">
              <el-input
                v-model="newProjectModel.projectDes"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="位置信息" prop="projectLocation">
              <el-input
                v-model="newProjectModel.projectLocation"
                :disabled="detailsDisabled"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false"
          >取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
import {
  queryPageProject,
  insertProject,
  deleteProject,
  updateProject
} from "@/api/clientOrObject/object"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      tableData: [],
      count: 0,
      projectTypeOptions: [
        {
          label: "私人客户",
          value: "私人客户"
        },
        {
          label: "高能耗客户",
          value: "高能耗客户"
        },
        {
          label: "学校客户",
          value: "学校客户"
        }
      ],
      searchOptions: [
        {
          label: "顾清曦",
          value: "gqx"
        }
      ],
      searchForm: {
        searchInput: "",
        searchSelectValue: ""
      },
      newProjectModel: {
        projectName: "",
        projectType: "",
        projectDes: "",
        projectLocation: "",
        id: ""
      },
      detailsDisabled: false,
      isGlobalMessageShow: false,

      dialogCenterTitle: "",
      dialogTitle: "",
      message: "",
      pageIndex: 1,
      pageSize: 20,
      customerCode: "",
      loading: false,
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        projectType: [
          { required: true, message: "请选择选择类型", trigger: "change" }
        ],
        projectLocation: [
          { required: true, message: "请输入位置", trigger: "blur" }
        ]
      }
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.customerCode = this.$route.query.customerCode
    this.getPageProject()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    deviceClick(row) {
      this.$router.push({
        path: "/clientOrObject/device",
        query: { id: row.projectCode }
      })
    },
    async getPageProject(pageIndex = 1, pageSize = 20, tableInfo = {}) {
      this.loading = true
      const { searchInput, searchSelectValue } = tableInfo
      const { object } = await queryPageProject({
        pageIndex,
        pageSize,
        customerCode: this.customerCode,
        projectName: searchInput,
        projectType: searchSelectValue
      })
      console.log(object)
      this.count = object.count
      this.tableData = object.data
      this.loading = false
    },
    newProject() {
      this.dialogCenterTitle = "项目基本信息"
      this.dialogTitle = "添加项目"
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      this.detailsDisabled = false
      Object.keys(this.newProjectModel).forEach((item) => {
        this.newProjectModel[item] = ""
      })
    },
    handlerEdit(row) {
      this.dialogCenterTitle = "项目基本信息"
      this.dialogTitle = "项目详情"
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      this.detailsDisabled = false
      this.newProjectModel.projectName = row.projectName
      this.newProjectModel.projectType = row.projectType
      this.newProjectModel.projectDes = row.projectDes
      this.newProjectModel.id = row.id
      this.newProjectModel.projectLocation = row.projectLocation
    },
    handlerScenario(row) {
      this.$router.push({
        path: "/clientOrObject/scenario",
        query: {
          projectCode: row.projectCode
        }
      })
    },
    async searchClick() {
      this.getPageProject(1, 20, this.searchForm)
    },
    async dialogSave() {
      this.$refs.loginFormRef.validate(async (v) => {
        if (v) {
          this.$refs.ycDialog.dialogVisible = false
          if (this.detailsDisabled) {
            // 详情
            this.$refs.ycDialog.dialogVisible = false
          } else if (
            this.newProjectModel.projectName &&
            this.newProjectModel.id
          ) {
            // 编辑
            const { status } = await updateProject({ ...this.newProjectModel })
            if (status == 200) {
              this.isGlobalMessageShow = true
              this.message = "success"
            } else {
              this.message = "error"
            }
          } else {
            this.newInsertProject()
          }
          this.getPageProject()
        }
      })
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    async newInsertProject() {
      const { status } = await insertProject({
        customerCode: this.customerCode,
        ...this.newProjectModel
      })
      if (status == "200") {
        this.isGlobalMessageShow = true
        this.message = "success"
        this.getPageProject()
      } else {
        this.isGlobalMessageShow = true
        this.message = "error"
      }
    },
    async handlerDelete({ id }) {
      this.$confirm("确定删除此项目吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteProject({ id })
        if (status == 200) {
          this.getPageProject()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },

    selectChange() {
      console.log("aaa")
    },
    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    },
    refresh() {
      Object.keys(this.searchForm).forEach((item) => {
        this.searchForm[item] = ""
      })
      this.getPageProject()
    }
  }
}
</script>
<style lang="scss" scoped>
.clientType {
  .title-container {
    display: flex;
    justify-content: flex-end;
    .left-box {
      width: 550px;
      .formClass {
        display: flex;
        justify-content: space-around;
        margin-right: 8px;
        .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;
          .el-input {
            width: 216px;
          }
          .el-select {
            width: 171px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
